<template>
	<view class="page-apply-wrapper s-flex-c-s-s">
		<view class="form-box">
			<up-form :model="modelData" labelPosition="top" ref="uFormRef">
				<template v-for="(item,index) in questionAnswer">
					<up-form-item v-if="item.type==1" :key="index" labelPosition="top" required :label="item.question"  prop="is_have_mpf" labelWidth="auto">
						<up-radio-group placement="column" v-model="modelData[item.question]">
							<up-radio v-for="item1 in item.answer" :key="item1" 
							:customStyle="{marginBottom: '10px'}" 
							activeColor="#FF7139" :name="item1" :label="item1">
							</up-radio>
						</up-radio-group>
					</up-form-item>
					<up-form-item v-if="item.type==2" :key="index" labelPosition="top" required :label="item.question" prop="cored" labelWidth="auto">
						<up-checkbox-group v-model="modelData[item.question]" placement="column">
							<up-checkbox v-for="item2 in item.answer" :key="item2"  
							:customStyle="{marginBottom: '10px'}"
							:label="item2" :name="item2">
							</up-checkbox>
						</up-checkbox-group>
					</up-form-item>
				</template>
				<view style="background: #F6F6F6; padding: 20rpx 30rpx;" class="s-flex-r-s-c">
					<text class="label" style="margin-right: 20rpx;">姓名</text>
					<up-input v-model="name" border="none" placeholder="请输入姓名"></up-input>
				</view>
			</up-form>
		</view>
		<view class="btm-box">
			<view class="t-xieyi s-flex-r-s-c">
			  <image
			    @click="checked = !checked"
			    v-if="checked"
			    class="icon circle"
			    src="/static/img/login/yes.png"
			    alt="" />
			  <view @click="checked = !checked" v-else class="circle"></view>
			  <view class="text">
			    已阅读并同意
			    <text class="t" @click="go(`/pages/h5-details/h5-details?type=1`)">《用户协议》</text>
			    与
			    <text class="t" @click="go(`/pages/h5-details/h5-details?type=2`)">《隐私政策》</text>
			  </view>
			</view>
			<view class="apply-btn-wrapper s-flex-c-c-c">
				<view class="apply-btn" @click="handleConfirm">
					<text>定制专属方案</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		unref,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	const modelData = ref({})
	const rules = {}
	const questionAnswer = ref([])
	const checked = ref(false);
	const uFormRef = ref(null);
	const questionObj = ref({});
	const name = ref("")
	const id = ref("")
	onLoad((e) => {
		if (e && e.id) {
			id.value = e.id
			getForm()
		}
	})
	// 获取项目详情
	function getForm() {
		proxy.$request({
			url: 'api/service/getServiceQuestionAnswer',
			header: "application/x-www-form-urlencoded",
			data: {
				service_id: id.value
			}
		}).then(res => {
			if(res.code==1&&res.data){
				uni.setNavigationBarTitle({
					title:res.data.title
				})
				questionObj.value = res.data;
				questionAnswer.value = res.data.question_answer;
				questionAnswer.value.map(i=>{
					modelData.value[i.question+''] = i.type==1?'':[]
				})
			}
		})
	}


	function handleConfirm(e) {
		if(!checked.value){
			return proxy.$toast("请先同意协议");
		}
		const question_answer_info = Object.keys(modelData.value).map(i=>{
			return {
				question: i,
				answer:Array.isArray(modelData.value[i])?[...modelData.value[i]]:modelData.value[i]?[modelData.value[i]]:[],
			}
		})
		for (var i = 0; i < question_answer_info.length; i++) {
				const v = question_answer_info[i].answer
				if(!(Array.isArray(v)&&v.length)){
					return proxy.$toast(`请选择${question_answer_info[i].question}`)
				}
		}
		if(!name.value){
			return proxy.$toast(`请输入姓名`)
		}
		if(!checked.value){
			return proxy.$toast(`请勾选并同意协议后继续`)
		}
			console.log('question_answer_info: ', unref(question_answer_info))
		const params = {
			service_id:id.value,
			question_answer_id:questionObj.value.id,
			question_answer_info:JSON.stringify(question_answer_info),
			name:name.value
		}
		proxy.$request({
			url: 'api/service/applyService',
			header: "application/x-www-form-urlencoded",
			data: params
		}).then(res => {
			if (res.code == 0) {
				return proxy.$toast(res.msg)
			} else {
				proxy.$toast(res.msg)
				setTimeout(()=>{
					proxy.go(`/pages/serve/customerService/customerService?id=${id.value}`)
				},1500)
			}
		})
	}
</script>
<style lang="scss" scoped>
	.page-apply-wrapper {
		padding: 12rpx 36rpx 30rpx;
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top) - var(--window-bottom));
		/* #endif */
		/* #ifdef H5 */
		// padding-bottom: var(--window-bottom);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		box-sizing: border-box;
		background: #ffffff;
		.form-box{
			flex: 1;
			// overflow: scroll;
		}
		.name-inp{
			height: 100rpx;
			background: #F6F6F6;
			padding:12rpx 32rpx 0;
			margin-bottom: 20rpx;
			::v-deep .u-form-item__body__left{
				margin-bottom: -10 !important;
				margin-right: 10rpx;
				margin-left: 20rpx;
			}
		}
		.btm-box{
			padding-bottom: 20rpx;
			.t-xieyi {
			  margin-bottom: 28rpx;
			  .circle {
			    width: 28rpx;
			    height: 28rpx;
			    border-radius: 20rpx;
			    border: 2rpx solid #999999;
			    margin-right: 6rpx;
			    box-sizing: border-box;
			  }
			  .icon {
			    border: none;
			  }
			  .text {
			    font-weight: 400;
			    font-size: 24rpx;
			    color: #666666;
			    line-height: 33rpx;
			    text-align: left;
			    .t {
			      color: #232F69;
			    }
			  }
			}
			.apply-btn-wrapper {
				background: #fff;
				width: 100%;
				.apply-btn {
					background: linear-gradient(128deg, #FF9839 0%, #FF7139 100%);
					color: #fff;
					width: 686rpx;
					margin: 0 auto;
					height: 96rpx;
					text-align: center;
					font-size: 32rpx;
					border-radius: 8rpx;
					line-height: 96rpx;
				}
			}
		}

	}
</style>